<template>
	<view>
		<view :class="!loadSuccess?'mask':''">	</view>
		<view class="vipUserCard">
			<view class="userInfoBox">
				<img class="avater" v-if="vipUserData.avatar" style="border-radius: 50%;" :src="vipUserData.avatar" mode="" />
				<view class="flexBox">
					<view class="infoBox">
						<view class="userName">
							{{vipUserData.nickname}}
						</view>
						<image v-if="vipdata.is_vip == 1" class="vipIcon" src="../../../static/vipCenter/vip5.png" mode=""></image>
					</view>
					<view class="invitationCode">
						我的邀请码:{{vipUserData.id}}
					</view>
				</view>
			</view>
			<view class="dateBox">
				我的VIP到期：{{vipdata.time}}
			</view>
		</view>
		<view class="vipAd">
			开通<image style="width: 47rpx;height: 25rpx;" src="../../../static/vipCenter/VIP.png" mode=""></image>即可尊享会员专属权限
		</view>
		<view class="vipPriceBox">
			<view :class="priceId != item.id ? 'vipPriceItem':'vipPriceItem vipPriceItem-click'" v-for="(item,index) in vipPriceList" :key="index" @click="getPriceId(item.id)" >
				<view class="recommend" v-if="item.status">
					{{recommend[item.status]}}
				</view>
				<view class="PriceData">
					<view class="vipDate">
						{{item.title}}
					</view>
					<view :class="priceId != item.id ? 'vipPrice':'vipPrice vipPrice-click'">
						{{item.present_price}}
					</view>
					<view class="oldPrice">
						{{item.original_price}}
					</view>
					<view :class="priceId != item.id ?'savePrice':'savePrice savePrice-click'">
						<image style="width: 23rpx;height: 23rpx;" src="../../../static/vipCenter/recommend.png" mode="" />立省17元
					</view>
				</view>
			</view>
		</view>
		<view class="payBtn" @click="buyVip">
			立即开通
		</view>
		<view class="line"></view>
		<view class="power">
			<view v-for="(item,index) in powerIcon" :key="item.id">
				<view class="powerIconBox">
					<image class="powerIcon" :src="item.src" mode=""></image>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="invitationBox" v-if="false" >
			<view class="invitationTopBox">
				<view class="rightBlock"></view>
				<view class="content">
					我的邀请
				</view>
				<view class="editIcon"></view>
			</view>
			<view class="row user-list-box" v-for="(item,index) in vipUserData" :key="index">
				<image class="avater" src="../../../static/logo.png" mode=""></image>
				<view class="userInfo">
					<view class="row nickName-vip">
						<view class="nickName">
							酸酸酸奶
						</view>
						<view class="vip">
							<image class="vipIcon" src="../../../static/vipCenter/vip5.png" mode=""></image>
						</view>
					</view>
					<view class="row age-location">
						<view class="age">
							年龄
						</view>
						<view class="location">
							位置
						</view>
					</view>
				</view>
				<view class="userInfo-right">
					<view class="time">
						08/23 11:14
					</view>
					<image class="moreimage" src="../../../static/img/lookMore.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				powerIcon: [{
						src: "../../../static/img/star.png",
						id: 1,
						title: '发布活动'
					},
					{
						src: "../../../static/img/dynamic.png",
						id: 2,
						title: '发布动态'
					},
					{
						src: "../../../static/img/chat.png",
						id: 3,
						title: '在线聊天'
					},
					{
						src: "../../../static/img/fpStar.png",
						id: 4,
						title: '添加好友'
					},
				],
				recommend: ['', '推荐', '热销'],
				vipdata: {
					time: '',
					is_vip: 0,
				},
				vipPriceList: [{
					id: 1,
					original_price: "0",
					present_price: "0",
					remarks: "",
					status: 1,
					title: "",
				}],
				vipUserData: {
					avatar: "",
					id: 0,
					nickname: ""
				},
				loadSuccess: false,
				priceId:0,
			}
		},
		onShow() {
			this.getVipInfo()
		},
		methods: {
			getVipInfo() {
				let data = {
					username: '15680861080',
					passwodrd: '123456'
				}
				this.$utils.request("/api/member", data, res => {
					if (res.code === 200) {
						this.vipdata = res.data.member
						this.vipPriceList = res.data.member_price_list
						this.vipUserData = res.data.user
						this.loadSuccess = true
					}
				})
			},
			getPriceId(id){
				this.priceId = id
			},
			buyVip(){
				if(!this.priceId){
					uni.showToast({
						icon:"none",
						title:"请选择会员套餐",
						success:res=>{
							return false
						}
					})
				}
				else {
					this.pay()
				}
			},
			pay(){
				let data = {
					id:this.priceId
				}
				this.$utils.postrequest("/api/member/add",data,res=>{
					if(res){
						if(res.code === 200){
							uni.showToast({
								icon:'success',
								title:res.message
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.message
							})
						}
					}else{
						uni.showToast({
							icon:'none',
							title:'请检查您的网络'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./index.scss");
</style>
